<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hyper Drink</title>
  <meta name="comp1800 template" content="My 1800 App">

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
  <style>

  </style>

</head>

<body>

  <nav class="navbar sticky-top bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand p-0 me-0 me-lg-2" href="index.html" aria-label="Hyper Drink">
        <h2 class="text-start fw-bold text-light">Hyper Drink</h2>
      </a>
      <div class="input-group mb-1 float-md-end w-25">
        <input type="text" class="form-control text-truncate" placeholder="Type anything here"
          aria-label="Type anything here" aria-describedby="button-addon2">
        <button class="btn btn btn-danger" type="button" id="button-addon2" onclick="myHelloFunction()">Search</button>
      </div>
    </div>
  </nav>

  <div class="px-4 pt-5 my-5 text-center border-bottom">
    <h1 class="text-bg-info p-3 display-4 fw-bold text-body-emphasis">DRINKING</h1>
    <img src="images/water.jpg" class="rounded" alt="..." width="200" height="200">
      <div class="col-lg-6 mx-auto">
              <p class="p-2 display-4 lead mb-4 float-start">It's recommended that you drink 2500 milliliters of water
        today based on your performance this week.</p>


      <div class="container">
        <form id="newStorageForm">
          <div class="form-group">
            <label for="StorageInput">Intake</label>
            <input type="text" class="form-control" id="StorageInput" required>
          </div>
          <div class="form-group">
            <label for="TargetInput">Target</label>
            <input type="text" class="form-control" id="TargetInput" required>
          </div>
          <button type="submit" class="btn btn-primary">Add Intake</button>
        </form>
      </div>


      <script src="./scripts/WaterStorage.js"></script>
              <div class="container px-5">
                    <div class="float-none p-3 display-4 fw-bold">Target amount:1.33/2.5L</div>
                  </div>
           
    </div>



    <nav class="navbar bg-primary fixed-bottom">
      <div class="container-fluid">
        <button type="button" class="btn btn-light col-3 p-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet"
            viewBox="0 0 16 16">
            <path fill-rule="evenodd"
              d="M7.21.8C7.69.295 8 0 8 0q.164.544.371 1.038c.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8m.413 1.021A31 31 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z" />
            <path fill-rule="evenodd"
              d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87z" />
          </svg>
          <a href="index.html">Home</a>
        </button>
        <button type="button" class="btn btn-light col-3 p-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill"
            viewBox="0 0 16 16">
            <path
              d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" />
          </svg>
          <a href="main.html">Community</a>
        </button>
        <button type="button" class="btn btn-light col-3 p-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-thermometer"
            viewBox="0 0 16 16">
            <path d="M8 14a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" />
            <path
              d="M8 0a2.5 2.5 0 0 0-2.5 2.5v7.55a3.5 3.5 0 1 0 5 0V2.5A2.5 2.5 0 0 0 8 0M6.5 2.5a1.5 1.5 0 1 1 3 0v7.987l.167.15a2.5 2.5 0 1 1-3.333 0l.166-.15z" />
          </svg>
          <a href="temperature.html">Temperature</a>
        </button>
        <button type="button" class="btn btn-light col-3 p-1 dropup">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="true">
            More
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="Login.html">Login</a></li>
            <li><a class="dropdown-item" href="benefit.html">Benifit</a></li>
            <li><a class="dropdown-item" href="chat.html">Chat</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </button>
      </div>
    </nav>

    <script src="./scripts/script.js"></script>

</body>

</html>